<template>
    <el-dialog v-model="dialogVisible" title="房间信息">
        <el-form>
            <el-form-item label="房间名">
                <el-input v-model="room!.roomName" />
            </el-form-item>
            <el-form-item  label="房间类型">
                <el-input v-model="room!.roomType" />
            </el-form-item>
            <el-form-item label="房间价格">
                <el-input v-model="room!.roomPrice" />
            </el-form-item>
            <el-form-item label="房间状态">
                <el-input v-model="room!.roomStatus" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="modify()">
                    修改
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { toRaw, ref, defineProps } from 'vue';
import type { RoomType } from '@/types';
import { modifyRoom } from '@/api';
import { ElMessage } from 'element-plus';

const props = defineProps<{
    callback: Function
}>()

const room = ref<RoomType>({})

const dialogVisible = ref(false)
const showDialog = (room1: RoomType) => {

    dialogVisible.value = true
    room.value = { ...room1 }
    //js解构语法 {...x}
    //防止双向数据绑定
}
const modify = () => {
    modifyRoom(room.value).then((res: any) => {
        if(res.code==200){
            ElMessage.success("修改成功")
            dialogVisible.value = false
            props.callback()
        }
    })

}
//暴露箭头函数
defineExpose({ showDialog })
</script>
<style lang="less" scoped>

</style>